/* nav bar*/
.navbar {
    background-color: rgba(0, 0, 0, 0.856) !important;
}
.navbar-nav .nav-link.active{
    background-color: transparent;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    position: relative;
}
.nav-item a 
{
    padding-inline: 0 15px !important;
}
.navbar-nav .nav-link.active::after {
    content: "";
    width: 70%;
    left: 0;    
    height: 2px;
    top: 100%;
    background-color: white;
    position: absolute;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
}
li.nav-item::before {
    content: "";
    left: 0;
    height: 2px;
    top: 100%;
    background-color: white;
    width: 0%;
    position: absolute;
    transition: all .5s linear;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -ms-transition: all .5s linear;
    -o-transition: all .5s linear;
}
li.nav-item:hover:before{
    width: 70%;
}
/*end of navbar*/
/*start  of home section*/
.Morgan_Freeman{
     background-image:  url(../image/hero-bg.jpg); 
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
} 
h1{
    font-size:  4.5rem; ;
    position: relative;
}
h1::after {
    content: "";
    position: absolute  ;
    top: 120%;
    left: 50%;
    font-size: 50px;
    transform: translatex(-50%);
    animation-name: up-down;
    animation-duration:4s;
    animation-timing-function: linear ;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    -webkit-transform: translatex(-50%);
    -moz-transform: translatex(-50%);
    -ms-transform: translatex(-50%);
    -o-transform: translatex(-50%);
}
@keyframes up-down {
    0%{
        content: "|";
    }
    6%{
        content: "D|";
    }
    12%{
        content: "De|";
    }
    18%{
        content: "Des|";
    }
    24%{
        content: "Desi|";
    }
    30%{
        content: "Desig|";
    }
    36%{
        content: "Design|";
    }
    42%{
        content: "Designe|";
    }
    48%{
        content: "Designer|";
        animation-play-state: paused;
        animation-delay: 2s;
    }
    54%{
        content: "Designe|";
     
    }
    60%{
        content: "Design|";
    }
    66%{
        content: "Desig|";
    }
    72%{
        content: "Desi|";
    }
    78%{
        content: "Des|";
    }
    84%{
        content: "De|";
    }
    90%{
        content: "D|";
    }
    95%{
        content: "|";
    }
    100%{
        content: "|"; 
    }

}
/*end  of home section*/
/* section about me  */
div.about_me div h5::after {
    content: "";
    width: 16%;
    height: 3px;
    position: absolute;
    background-color: rgb(13 110 253) !important;
    bottom: -10px;
    left: 0px;
}
 div.after_line::after{
    content: "";
    width: 4%;
    height: 5px;
    position: absolute;
    background-color: rgb(13 110 253) !important;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.roun {
    height: 100px;
    width: 100px;
    margin-inline: auto;
    border-width: 8px !important;
    transition: all .5s;
}
.roun:hover {
    background-color:  rgb(13 110 253) !important;
    border-color: rgb(158, 197, 254) !important;
    color: white !important;
}
.totat_reviw {
    background-image: url(../image/post-3.jpg)  ;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
 }
.rounn {
    height: 100px;
    width: 100px;
    margin-inline: auto;
    border-width: 8px !important;
    color: #fff;
}
.plus {
    width: 30px;
    height: 30px;
}
.image :first-child>img {
    transition: all 0.5s ease-in-out;
}
.image:hover img{
    transform: scale(1.3);
}
.section_tree { 
    background-image: linear-gradient(rgba(13, 109, 253, 0.7),   rgba(13, 109, 253, 0.7))   , url(../image/overlay-bg.jpg);
    background-size:   cover;
    background-repeat: no-repeat;
    background-position: center  center;
    background-attachment: fixed;
    padding: 8rem 0;
}
.likns {
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    margin-bottom: 10px;
}
.likns:hover  

 {
    color: rgb(13 110 253) !important  ;
}
div.likns img{
    width: 50px;
}

.trevel {
   
    transform: translate(-50% ,-50%) ;
    -webkit-transform: translate(-50% ,-50%) ;
    -moz-transform: translate(-50% ,-50%) ;
    -ms-transform: translate(-50% ,-50%) ;
    -o-transform: translate(-50% ,-50%) ;
}
.footer{
    background-image: url(../image/overlay-bg.jpg)  ;
    background-size:   cover;
    background-repeat: no-repeat;
    background-position: center  center;
    background-attachment: fixed;

}
ul li div.smal_icon {
    height: 50px;
    width: 50px;
    transition: all .5s;
}
ul li div.smal_icon:hover {
    background-color:  rgb(13 110 253) !important;
   border-color: rgb(158, 197, 254) !important;
   color: white !important;
}
div.container div.button_of_sectiontree button  {
    height: 10px !important;
    width: 10px !important;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
div.arrow {
    width: 40px;
    height: 40px;
    background-color:  rgb(13 110 253);
    left: 20px;
    bottom: 20px;
    cursor: pointer;
}